<template>
  <div>
    <p>核对球员姓名，号码，以确保数据统计准确</p>

    <!-- 球衣颜色 -->
    <van-row>
      <van-col span="6">队服颜色</van-col>
      <van-col span="3">
        <clothColor1></clothColor1>
      </van-col>
      <van-col span="3">
        <clothColor2></clothColor2>
      </van-col>
      <van-col span="3">
        <clothColor3></clothColor3>

      </van-col>
      <van-col span="3">
        <clothColor4></clothColor4>

      </van-col>
      <van-col span="3">
        <clothColor5></clothColor5>

      </van-col>
      <van-col span="3">
        <clothColor6></clothColor6>

      </van-col>
    </van-row>
    <!-- 球员 -->
    <div class="player-container">
      <ul>
        <li v-for="i in o" :key="i">
           <playerInfo></playerInfo>
        </li>
      </ul>
    </div>
    <!-- 添加球员组件按钮 -->
    <van-tabbar v-model="active">
      <van-tabbar-item @click="add">
        添加球员
        </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>

import clothColor1 from '@/components/cloth_color/cloth-color1.vue'
import clothColor2 from '@/components/cloth_color/cloth-color2.vue'
import clothColor3 from '@/components/cloth_color/cloth-color3.vue'
import clothColor4 from '@/components/cloth_color/cloth-color4.vue'
import clothColor5 from '@/components/cloth_color/cloth-color5.vue'
import clothColor6 from '@/components/cloth_color/cloth-color6.vue'
import playerInfo from '@/components/Player-information/player.vue'

export default {
  name: 'second-team',
  props: ['title_msg'],
  data () {
    return {
      // 将vuex 中的队伍信息赋值给flag

      flag: this.$store.state.team1,
      active: 0,
      o: 1
    }
  },
  methods: {
    add () {
      this.o += 1
      console.log(this.flag)
    }
  },
  components: {
    clothColor1,
    clothColor2,
    clothColor3,
    clothColor4,
    clothColor5,
    clothColor6,
    playerInfo
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  p{
    text-align: center;
    background-color: darkcyan;
  }
  .van-row{
    margin: 20px 0 20px 0;
    font-size: 5vw;
  }
  .van-col{
    font-size: 2vw;
    text-align: center;
    line-height: 10vw;
    position: relative;
    height: 10vw;
    background-color: rgb(255, 255, 255);
    /* border: 2px saddlebrown solid; */
  }
  .van-tabbar-item{
    border: 2px solid red;
    border-radius: 2vw;
    margin: 2vw;
    color: red;
  }
</style>
